<template>
  <BasicDrawer
    @register="register"
    @ok="handSave"
    width="60%"
    :showFooter="true"
    :okAuth="'m8:machine:debug:edit'"
    :maskClosable="true"
  >
    <template #title>
      <span> 机床调试登记【{{ record.machineId }}】 </span>
    </template>
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'WorkCalendarModal',
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { officeTreeData } from '/@/api/sys/office';
  import { taskDebugsave } from '/@/api/m8/machine/machine';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  const emit = defineEmits(['success', 'register']);
  const { showMessage } = useMessage();

  let record = ref<any>({
    id: '',
    taskCode: '',
    machineId: '',
    operCode: '',
    overType: '',
    picno: '',
  });
  let flag = ref(false);
  const [register, { closeDrawer, setDrawerProps }] = useDrawerInner(async (e) => {
    flag.value = false;
    await resetFields();
    console.log(e);
    record.value = e;
    flag.value = true;
    let inputFormSchemas: FormSchema[] = [
      {
        label: '调试-负责人',
        field: 'manCodes',
        fieldLabel: 'manNames',
        component: 'TreeSelect',
        required: true,
        componentProps: {
          api: officeTreeData,
          treeCheckable: true,
          params: {
            isLoadUser: true,
            userIdPrefix: '',
            isAll: true,
            ywType: '1',
            isShowCode: true,
          },
          canSelectParent: true,
          allowClear: true,
        },
        itemProps: { validateTrigger: 'blur' },
      },
      {
        label: '实际加工时长',
        field: 'sjjgtime',
        component: 'Input',
        componentProps: {
          maxlength: 10,
        },
        required: true,
      },
      {
        label: '调试-说明',
        field: 'remarks',
        component: 'InputTextArea',
        // required: true,
        componentProps: {
          maxlength: 500,
          rows: 5,
        },
        // colProps: { lg: 24, md: 24 },
      },
    ];
    setProps({
      labelWidth: 120,
      schemas: inputFormSchemas,
      baseColProps: { lg: 24, md: 24 },
    });
  });

  async function handSave() {
    try {
      const data = await validate();
      setDrawerProps({ confirmLoading: true });
      console.log(new Date());

      const params: any = {
        id: '',
        'task.taskCode': record.value.taskCode,
        machineId: record.value.machineId,
        ...data,
      };
      console.log('submit', params, data, record.value);
      const res = await taskDebugsave(params);
      showMessage(res.message);
      setTimeout(closeDrawer);
      emit('success', '');
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage('您填写的信息有误，请根据提示修正。');
      }
      console.log('error', error);
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
  const [registerForm, { resetFields, validate, setProps }] = useForm({
    labelWidth: 150,
  });
</script>
<style scoped>
  .ant-picker {
    width: 80%;
  }
</style>
